<template>
  <div class="editor-division-icon" >
            <div class="editor-division-title">主题颜色
                      <ColorPicker style="margin-left:10px"  @on-change="clolochange" v-model="data.color" />
            </div>
            <div class="editor-division-list" v-for="(item,index) in data.datalist">
                <div>导航名称
                    <Input style="width:250px;margin-left:10px" v-model="item.title"/></div>
                <div>导航链接 
                    <Select v-model="item.link" style="width:250px;margin-left:10px">
                        <Option value="0">无</Option>
                        <Option value="1">1</Option>
                    </Select>
                </div>
                <div>是否显示  <i-switch style="margin-left:10px" size="small" v-model="item.show"/>  </div>

                <div>默认图标 <i  :style="{color:data.color}" @click="openicon(data.selfindex,index,'on')" :class="item.on"></i> </div>
                <div >选中图标 <i  :style="{color:data.color}" @click="openicon(data.selfindex,index,'off')" :class="item.off"></i></div>
            </div>
             <Modal
                width="650"
                v-model="modal1"
                title="Common Modal dialog box title"
              >
            <TheIcon @on-click="geticon"/>
            </Modal>
  </div>
</template>

<script>
import TheIcon from "@/components/icon"

export default {
  props:{
    data:{
      type:Object,
      default:()=>{
        return{
          
        }
      }
    }
  },
  name: 'ad',
  data () {
    return {
        modal1:false,
      value:"",
      cion:"",
      sele:"1",
      animal:"1",
      lianji:"1",
      anima2:"1",
      msg: '广告  暂时分为轮播和单张展示两种'

    }
  },
  methods:{
    addad(d){
      this.control(d)
    },
    openicon(dindex,xindex,targets){
        this.selfindex=dindex
            this.index=xindex
            this.targets = targets
        this.modal1 =true
    },
    clolochange(e){

    },
    inputChanges(e,index){

   var data = {title:e,index:index}
      this.$emit('on-change',data)
    },
    selectChanges(e){
         var data = {link:e}
        this.$emit('on-change',data)
    },
    geticon(d){
        console.log(d)
        var data={
            selfindex:this.selfindex,
            index:this.index,
            targets:this.targets,
            classname:d
        }

        this.$emit('on-change',data)
        this.modal1 = false
    },
    rchange(e){
        if(e==1){
          this.anima2="1"
        }
    }
  },
    components:{
       TheIcon
    }
}
</script>
<style scoped>
@import url(../assets/icon.css);
.icons{
    text-align: left;
}
.icons-item{
    display: inline-block;
    width: 100px;
    text-align: center;
    margin: 10px;
    cursor: pointer;
}
.i-icon{
    font-size: 40px;
}
</style>
